<template>
  <div class="discount-time">
    <div class="discount-time_title">
      <img src="../../../assets/img/home/ic_time.png" alt="" />
      <span class="title">限时折扣</span>
      <div class="timer_more">
        <div class="discount-center">
          <div>
            <img src="../../../assets/img/home/ic_timer.png" alt="" />
          </div>
          <div class="countdown">
            <span class="hour" v-if="day !== 0">{{day || '0'}}天</span>
            <span class="hour" v-if="hour !== 0">{{ hour || '0'}}小时</span>
          </div>
        </div>
        <div class="discount-right" @click="discountMore">
          <span>更多</span>
          <img src="../../../assets/img/home/ic_right.png" alt="">
        </div>
      </div>
    </div>
    <div class="swiper">
      <swiper class="swiper-box" :options="swiperOption">
        <swiper-slide v-for="(item, index) in discountList.list" :key="index" class="swiper-list">
          <div class="swiper-list-item" @click="itemClick(index)">
            <div class="gameicon">
              <img :src="item.gameicon" alt="" />
            </div>
            <div class="gamename">{{ item.gamename }}</div>
            <div class="discount">
              <div class="flash_discount">{{ item.flash_discount }}折</div>
              <div class="text-disconut">{{ item.discount }}折</div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    props: {
      discountList: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    data() {
      return {
        day: null,
        hour: null,
        extend_endtime:"1627552800",
        // list: [
        //   {
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   },{
        //     discount:"4.2",
        //     flash_discount:"3.5",
        //     gameicon:"https://p1.277sy.com/2021/07/21/60f7cd1e8cf24.png",
        //     gamename:"魔剑侠缘(高返版）",
        //     genre_str:"角色 • 仙侠",
        //   }
        // ],
        swiperOption: {
          slidesPerView: 3,
          // spaceBetween: 35,
        }
      }
    },
    mounted() {
      this.countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
      // 2. 开启定时器
      setInterval(this.countDown, 1000);
    },
    methods: {
      countDown() {
        var inputTime = this.discountList.extend_endtime
        // var inputTime = this.extend_endtime
        var nowTime = +new Date() / 1000 // 返回的是当前时间总的毫秒数
        if(inputTime < nowTime) return ''
        var times = inputTime - nowTime // times是剩余时间总的秒数
        var D = parseInt(times / 60 / 60 / 24) 
        this.day = D
        var h = parseInt(times / 60 / 60) % 24 + 1 //时
        this.hour = h // 把剩余的小时给 小时黑色盒子
      },
      discountMore() {

      }
    },
  }
</script>

<style lang="less" scoped>
.discount-time {
  width: 9.466667rem;
  height: 5.04rem;
  background: #fff;
  border-radius: .266667rem;
  margin: .266667rem auto 0;
  font-size: .48rem;
  font-weight: 800;
  color: #000000;
  .discount-time_title {
    padding: .4rem 0 0 .266667rem;
    display: flex;
    align-items: center;
    img {
      margin-right: 0.133333rem;
      display: inline-block;
      width: 0.586667rem;
      height: 0.586667rem;
    }
  }
}

.swiper {
  width: 9.466667rem;
  height: 3.253333rem;
  margin-top: .4rem;
}

.swiper::-webkit-scrollbar {
  display: none;
}

.swiper-box {
  display: flex;
  width: 9.466667rem;
  height: 3.253333rem;
}

.swiper-list-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.gameicon {
  width: 2.133333rem;
  height: 2.133333rem;
  border-radius: .533333rem;
  overflow: hidden;
}

.gamename {
  width: 2.4rem;
  font-size: .346667rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}

.gameicon img {
  width: 2.133333rem;
  height: 2.133333rem;
}

.discount {
  display: flex;
  align-items: flex-end;
}

.flash_discount {
  padding: 0 .053333rem;
  font-size: .346667rem;
  font-weight: 800;
  color: #ff2626;
}

.text-disconut {
  padding: 0 .053333rem;
  font-size: .293333rem;
  color: #999999;
  text-decoration: line-through;
}

.timer_more {
  flex: 1;
  height: .586667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .discount-center {
    height: .586667rem;
    display: flex;
    align-items: center;
    margin-left: .266667rem;
    img {
      padding-top: .066667rem;
      display: inline-block;
      width: .48rem;
      height: .48rem;
    }
    .countdown {
      font-size: .48rem;
      color: #ff5656;
      font-weight: 400;
    }
  }
  .discount-right {
    display: flex;
    align-items: center;
    font-size: .373333rem;
    color: #666666;
    font-weight: 400;
    margin-right: .266667rem;
    img {
      display: inline-block;
      width: .266667rem;
      height: .266667rem;
      margin: 0;
    }
  }
}
</style>